<template>
  <div class="wareHouseBox">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-select
          clearable
          v-model="formInline.stoCode"
          placeholder="请选择仓库信息"
          @change="handlestorehousechange"
        >
          <el-option
            v-for="item in RepositoryDictionary"
            :key="item.id"
            :label="item.stoName"
            :value="item.stoCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="queryValidateForm"
        >查询
        </el-button
        >
        <el-button
          type="danger"
          icon="el-icon-refresh"
          @click="cancelValidateForm"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>

    <!-- 分组展示 -->
    <div class="wareHouseContent">
      <div
        class="content"
        :class="{ disabled: item.enableState === '0' }"
        @click="item.enableState !== '0' && openPopup(item)"
        v-for="(item, index) in groupedWarehouseDate"
        :key="index"
      >
        <div class="title">{{ item.sto_name + '_' + item.sto_code+ '_' + item.type_name }}</div>
        <div class="img">
          <image-preview-black
            :src="item.icon_path"
            :width="'100%'"
            :height="'100%'"
          />
        </div>
        <div class="bottomContent">
          <div>
            共有库区: <span>{{ item.totalNum }}</span>
          </div>
          <div>
             <el-tag type="success" style="margin-right: 10px">
               已启用:{{ item.activeNum }}
            </el-tag>
             <el-tag type="danger">
               未启用:{{ item.inactiveNum }}
          </el-tag>
          </div>
        </div>

        <!-- 添加描述信息悬浮展示 -->
        <div class="description-tooltip" v-if="item.description">
          {{ item.description }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryStoStock,//仓库
  getAllWarehouseList,//获取下拉参考国库
} from "@/api/index/yxl";
import ImagePreviewBlack from "@/components/ImagePreview/ImagePreviewBlack.vue";

export default {
  components: {ImagePreviewBlack},
  data() {
    return {
      formInline: {
        mode:'0'
      },
      visible: false,
      RepositoryDictionary: [],
      groupedWarehouseDate: []
    };
  },
  created() {
    this.getList();//获取仓库概况
    this.getWareList();//获取仓库下拉
  },
  methods: {
    //获取仓库
    getList() {
      queryStoStock(this.formInline).then(res => {
        this.groupedWarehouseDate = res.data;
      })
    },
    //获取仓库下拉
    getWareList() {
      getAllWarehouseList().then(res => {
        this.RepositoryDictionary = res.data;
      })
    },
    // 点击列表跳转到库区
    openPopup(item) {
      const form = {
        stoId: item.sto_id,
        mode:'1'
      };
      queryStoStock(form).then((response) => {
        this.$router.push({
          path: "/index/areaInformation",
          query: {
            CargoArea: JSON.stringify(response.data),
          },
        });
      });
    },
    // 仓库选择变化
    handlestorehousechange(val) {
      this.formInline.stoCode = val;
      this.getList();
    },
    // 查询
    queryValidateForm() {
      this.getList();
    },
    // 重置
    cancelValidateForm() {
      this.formInline.stoCode = "";
      this.getList();
    },
  },
};
</script>

<style scoped lang="scss">
//禁用
.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 设置根字体大小：基础大小为16px */
html {
  font-size: 16px;
  /* 默认字体大小为16px，相当于1rem = 16px */
}

/* 默认全局字体大小 */
body {
  font-size: 1rem;
}

.wareHouseBox {
  padding: 15px;
}

//分组
.groupBox {
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px 10px;
}

/* 鼠标悬停时放大效果 */
.content:hover {
  transform: scale(1.05);
}

.wareHouseContent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 30px;

  .group-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
  }

  .content {
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    width: calc(20% - 24px);
    height: 185px;
    margin-bottom: 20px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);

    // 添加悬停显示描述信息的样式
    &:hover .description-tooltip {
      display: block;
    }

    .img {
      height: 105px;
      width: 100%;
      margin-bottom: 5px;
    }

    .bottomContent {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
    }

    .title {
      font-size: 20px;
      margin-bottom: 5px;
      color: #333;
      display: flex;
      justify-content: space-between;
    }

    // 描述信息悬浮框样式（美化样式）
    .description-tooltip {
      display: none;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: #f5f5f5;
      color: #333;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      width: auto;
      min-width: 120px;
      max-width: 200px;
      box-sizing: border-box;
      z-index: 10;
      margin-top: 5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      text-align: center;
      white-space: normal;
      word-wrap: break-word;
      border: 1px solid #ddd;

      &::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #ddd transparent;
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -4px;
        border-width: 4px;
        border-style: solid;
        border-color: transparent transparent #f5f5f5 transparent;
      }
    }
  }
}

/* 响应式设计：不同屏幕尺寸下的布局调整 */
@media (max-width: 1500px) {
  .content {
    flex: 0 1 calc(25% - 24px);
    /* 每行显示 4 个卡片 */
  }
}

@media (max-width: 1200px) {
  .content {
    flex: 0 1 calc(33.33% - 24px);
    /* 每行显示 3 个卡片 */
  }
}

@media (max-width: 900px) {
  .content {
    flex: 0 1 calc(50% - 24px);
    /* 每行显示 2 个卡片 */
  }
}

@media (max-width: 600px) {
  .content {
    flex: 0 1 100%;
    /* 每行显示 1 个卡片 */
  }
}
</style>
